
<script setup>
  import { ref, defineProps, onMounted } from 'vue';
  const girdRef = ref(null);
  const canvasWidth = 1920 * 2;
  const canvasHeight = 1080 * 2;
  const grid ={
    strokeColor: '#E2E2F0',
    strokeWidth: 0.5,
    distance: 10,
    isLineDash: true,
    lineDash: [3, 3],
  }

  const drawGridLine = (x1, y1, x2, y2) => {
    if (girdRef && girdRef.value) {
        const gridCanvas = girdRef.value.getContext('2d');
        const { strokeWidth, strokeColor, lineDash } = grid;

        gridCanvas.beginPath();
        gridCanvas.moveTo(x1, y1);
        gridCanvas.lineTo(x2, y2);
        gridCanvas.setLineDash(lineDash);
        gridCanvas.lineWidth = strokeWidth;
        gridCanvas.strokeStyle = strokeColor;
        gridCanvas.stroke();
      }
  }

  const drawGrid = () => {
    const distance = grid.distance;
    const rowNumber = Math.ceil(canvasHeight / distance);
    const colNumber = Math.ceil(canvasWidth / distance);
    for(let i = 0; i < rowNumber; i++){
      drawGridLine(0, i * distance, canvasWidth, i * distance);
    }
    for (let j = 0; j < colNumber; j++) {
      drawGridLine(j * distance, 0, j * distance, canvasHeight);
    }
  }
  onMounted(()=>{
    // drawGridLine(0,0, 100,100)
    drawGrid()
  })
</script>

<template>
  <div class="svg-home">
    <!-- 绘制流程图 -->
    <!-- <canvas ref="girdRef" style="width:1920px; height: 1080px; transform: scale(0.5);"></canvas> -->
    <svg xmlns="http://www.w3.org/2000/svg" width="400" height="300">
      <!-- 图形内容将在这里绘制 -->
      <g class="user-warp">
        <rect class="rect-warp" x="0" y="0" width="100" height="80" rx="10" ry="10" 
          stroke-linecap="round" 
          stroke-linejoin="round"
          stroke="rgb(34, 36, 42)"
          strike-width="2px"
          fill="white"
          fill-opacity="0.95"
        ></rect>

        <path class="user-icon" d="M512 497.066667c108.8 0 198.4-98.133333 198.4-217.6C710.4 162.133333 620.8 64 512 64s-198.4 98.133333-198.4 217.6 89.6 215.466667 198.4 215.466667z m0-345.6c61.866667 0 115.2 57.6 115.2 130.133333s-53.333333 130.133333-115.2 130.133333-115.2-57.6-115.2-130.133333 53.333333-130.133333 115.2-130.133333zM934.4 808.533333C896 661.333333 742.4 563.2 512 563.2c-224 0-377.6 93.866667-420.266667 234.666667-4.266667 10.666667-6.4 21.333333-6.4 34.133333 0 53.333333 40.533333 98.133333 93.866667 104.533333l21.333333 2.133334c98.133333 14.933333 202.666667 21.333333 311.466667 21.333333 117.333333 0 228.266667-8.533333 330.666667-21.333333 53.333333-6.4 96-51.2 96-104.533334 0-8.533333-2.133333-17.066667-4.266667-25.6z m-113.066667 46.933334l-21.333333 2.133333c-91.733333 12.8-187.733333 19.2-285.866667 19.2-108.8 0-215.466667-8.533333-315.733333-23.466667 2.133333 0 2.133333 2.133333 4.266667 2.133334l-8.533334-2.133334h4.266667c-12.8-4.266667-21.333333-14.933333-21.333333-27.733333 0-4.266667 0-6.4 2.133333-10.666667V810.666667c38.4-100.266667 155.733333-164.266667 332.8-164.266667 181.333333 0 298.666667 66.133333 334.933333 168.533333 0 2.133333 2.133333 6.4 2.133334 8.533334 0 14.933333-12.8 29.866667-27.733334 32z" p-id="1105"></path>
        <text x="50" y="50" font-size="16" text-anchor="middle" fill="black">处理</text>
      </g>
        <!-- <circle cx="50" cy="50" r="30" fill="lightblue" stroke="black" stroke-width="2"/>
        <text x="50" y="55" font-size="16" text-anchor="middle" fill="black">开始</text>

        <rect x="130" y="35" width="100" height="30" fill="lightgreen" stroke="black" stroke-width="2"/>
        <text x="180" y="55" font-size="16" text-anchor="middle" fill="black">处理</text>
        <polygon points="300,30 330,50 300,70 270,50" fill="lightyellow" stroke="black" stroke-width="2"/>
        <text x="300" y="55" font-size="16" text-anchor="middle" fill="black">判断</text>
        <line x1="80" y1="50" x2="130" y2="50" stroke="black" stroke-width="2" marker-end="url(#arrow)"/>
        <line x1="230" y1="50" x2="270" y2="50" stroke="black" stroke-width="2" marker-end="url(#arrow)"/> -->
        <!-- <path d="M50,50 L100, 50 L100, 100 L50, 100 z"></path> -->
        <defs>
          <marker id="arrow" markerWidth="10" markerHeight="10" refX="5" refY="3" orient="auto" markerUnits="strokeWidth">
            <!-- <path d="M0,0 L0,6 L9,3 z" fill="black"/> -->
             <path d="M0,0 L0, 6 L6,6 L6, 0 z"></path>
          </marker>
        </defs>

        <defs>
          <marker markerWidth="10" markerHeight="10" refX="5" refY="3" orient="auto" markerUnits="strokeWidth">
            <!-- <path d="M0,0 L0,6 L9,3 z" fill="black"/> -->
            <path d="M50 50 A40 40 0 1 1 90 90"></path>
          </marker>
        </defs>
    </svg>
  </div>

</template>

<style lang="less" scoped>
.svg-home{
  width: 100vh;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  
}

.user-icon{
  transform: scale(0.02);
}
</style>
